<template>
  <!-- TODO 拆分单个弹窗 不默认都使用遮罩 -->
  <div class="v-toast">
    <table class="toast-text" v-if="toast.showType === 'toast'">
      <tr><td v-html="toast.toastText"></td></tr>
    </table>
    <div class="loading-gif-container" v-else-if="toast.showType === 'requesting'">
      <img src="@/assets/images/req_circel.png" :style="{transform: `rotate(${rotate}deg)`}" alt="">
      <img src="@/assets/images/req_royal.png" alt="">
    </div>
  </div>
</template>
<script>
/**
 * showType: {
 *  { name: 'toast', need: [switch, showType, toastText] },
 *  { name: 'requesting', need: [switch, showType] }
 * }
 */
export default {
  data () {
    return {
      rotate: 0 // 转圈圈角度
    }
  },
  methods: {
    // requesting 转圈圈
    requestingAnimate () {
      setInterval(() => {
        if (this.rotate === 360) { this.rotate = 10 } else { this.rotate += 10 }
      }, 30)
    }
  },
  computed: {
    toast () {
      return this.$store.state.toast
    }
  },
  mounted () {
    this.requestingAnimate()
  }
}
</script>
<style scoped>
.v-toast {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
/* requesting */
.loading-gif-container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 148px;
  height: 148px;
  margin-top: -74px;
  margin-left: -74px;
  border-radius: 26.88px;
  background: #000000;
  opacity: 0.55;
}
.loading-gif-container img:nth-child(1) {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 69px;
  height: 69px;
  margin-top: -34.5px;
  margin-left: -34.5px;
}
.loading-gif-container img:nth-child(2) {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 31.4px;
  height: 23.3px;
  margin-left: -15.7px;
  margin-top: -11.65px;
}
/* toast */
.toast-text {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 232px;
  height: 92px;
  margin-top: -46px;
  margin-left: -116px;
  border-radius: 6px;
  background: #000000;
  opacity: 0.55;
}
.toast-text td {
  font-size: 18px;
  text-align: center;
  color: #fff;
  line-height: 28px;
  vertical-align: middle;
}
</style>
